<template>
	<view class="content " :style="{
		        backgroundImage: `url('${bg_image}')`,
		      }">

		<view class="head">
			<view class="head_title ">
				<span v-html="title1"></span>
			</view>
			<view class="head_title">
				<span v-html="title2"></span>
			</view>
			<view class="head_title">
				<span v-html="title3"></span>
			</view>
		</view>
		<view class="lists flex flex-wrap  u-flex-between">
			<view class="list" v-for="(i,v) in list" :key="v" :class="i.region_status==0?'hover_list':''"
				@click="goDetail(i)">
				<view class="region">
					<image :src="i.region_image" mode="" class="region_img"></image>
					<view class="region_title">
						{{i.region_name}}
					</view>
				</view>
				<image :src="i.house_image" mode="" class="l_mainImg"></image>
				<view class="l_num" v-if="i.entr_num!=0">
					进{{i.entr_num}}次
				</view>
				<image src="../../static/image/no_data.png" mode="" class="suo_img" v-if="i.region_status==0"></image>
			</view>

		</view>
		<up-popup :show="noOpenShow" mode='center' bgColor='transparent'>
			<view class="noOpen_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					温馨提示
				</view>
				<view class="text-center marginTop-100 fontSize-32 color-333">
					 学习需要循序渐进，上个区训练还未完成，请先完成上个区的训练才能解锁哟
				</view>

				<view class="flex flex-center items-center marginTop-50">
					<view class="btn" @click="noOpenShow = false" style="background: #51D580;">
						知道了
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const reciteWordsHomeApi = inject('reciteWordsHome')
	const addregionlogApi = inject('addregionlog')
	const bg_image = ref('')
	const title1 = ref('')
	const title2 = ref('')
	const title3 = ref('')
	const list = ref([])
	const noOpenName = ref('');
	const noOpenShow = ref(false);
	onShow((op) => {
		reciteWordsHomeApi({}).then(res => {
			console.log(res, 115)
			bg_image.value = res.bg_image
			console.log(bg_image.value)
			title1.value = res.title1
			title2.value = res.title2
			title3.value = res.title3
			list.value = res.list
		})
	})

	const goDetail = (i) => {

		if (i.region_status != 0) {

			addregionlogApi({
				region_num: i.region_num,

			}).then(res => {
				console.log(res, 115)
				uni.setStorageSync('region_num', i.region_num)
				uni.navigateTo({
					url: '/pagesA/memory/memoryWordlist?region_num=' + i.region_num
				})
			})

		} else {
			// uni.showToast({
			// 	title: '此大区还未解锁',
			// 	icon: 'none'
			// })
			noOpenShow.value = true

		}
	};
</script>

<style scoped lang="scss">
	.content {

		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100vw;
		height: 100vh;

		.head {
			padding: 30rpx 32rpx;
		}

		.head_title {
			font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #417824;
			line-height: 30rpx;
		}
	}

	.lists {
		padding: 30rpx 32rpx;
		width: 484rpx;
		margin: 46rpx auto 0;

		.list {
			width: 192rpx;
			height: 220rpx;
			background: #FFFFFF;
			margin-bottom: 84rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			position: relative;

			.l_mainImg {
				width: 120rpx;
				height: 120rpx;
				display: block;
				margin: 20rpx auto 0;
			}

			.l_num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-top: 28rpx;
			}

			.region {
				position: absolute;
				top: -65rpx;
				left: 48rpx;
				width: 94rpx;
				height: 74rpx;

				.region_img {
					width: 94rpx;
					height: 74rpx;
					position: absolute;
				}

				.region_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 28rpx;
					position: absolute;
					left: 30rpx;
					z-index: 999;
					top: 10rpx;
				}
			}
		}

		.hover_list {
			background: rgba(0, 0, 0, 0.3);

			.suo_img {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 82rpx;
				left: 65rpx;
			}
		}
	}

	.noOpen_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		padding: 0 50rpx;
		box-sizing: border-box;

		.btn {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx;
			text-align: center;
			line-height: 93rpx;
			color: #fff;
		}

	}
</style>